<template>
    <div class="param-item">
        <div class="param-header">
            <span class="param-label">{{ label }}</span>
            <el-tooltip v-if="help" :content="help" placement="top">
                <el-icon><QuestionFilled /></el-icon>
            </el-tooltip>
        </div>
        <slot></slot>
    </div>
</template>

<script lang="ts" setup>
import { QuestionFilled } from '@element-plus/icons-vue';

defineProps<{
    label: string;
    help?: string;
}>();
</script>

<style lang="scss" scoped>
.param-item {
    margin-bottom: 16px;

    .param-header {
        display: flex;
        align-items: center;
        margin-bottom: 8px;

        .param-label {
            font-weight: 500;
            margin-right: 8px;
        }
    }
}
</style> 